<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>翻转式用户登录注册界面设计</title>
	<link rel="stylesheet" type="text/css" href="css/styles.css">
	<!--[if IE]>
		<script src="http://libs.baidu.com/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<div class="card" style="width: 50rem;">
		<div class="card-body">
		  <div class="jq22-container" style="padding-top:100px">
		<div class="login-wrap">
			<div class="login-html">
				<input id="tab-1" type="radio" name="tab" class="sign-in" checked><label for="tab-1" class="tab">登录</label>
				<input id="tab-2" type="radio" name="tab" class="sign-up"><label for="tab-2" class="tab">注册</label>
				<div class="login-form">
					<div class="sign-in-htm">
						<div class="group">
							<input id="user" type="text" class="input" placeholder="账号">
						</div>
						<div class="group">
							<input id="pass" type="password" class="input" data-type="password" placeholder="密码">
						</div>
						<div class="group">
							<input id="check" type="checkbox" class="check" checked>
							<label for="check"><span class="icon"></span>记住我</label>
						</div>
						<div class="group">
							<input type="submit" class="button" onclick="login()" value="登录">
						</div>
						<div class="hr"></div>
						<div class="foot-lnk">
							<a href="#forgot">忘记密码?</a>
						</div>
					</div>
					<div class="sign-up-htm">
						<div class="group">
							<input id="user" type="text" class="input" placeholder="账号">
						</div>
						<div class="group">
							<input id="pass" type="password" class="input" data-type="password" placeholder="密码">
						</div>
						<div class="group">
							<input id="pass" type="password" class="input" data-type="password" placeholder="确认密码">
						</div>
						
						<div class="group">
							<input type="submit" class="button" onclick="register()" value="注册">
						</div>
						<div class="hr"></div>
						<div class="foot-lnk">
							<label for="tab-1">已有账号?</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
		</div>
	  </div>
	<script>
		// 登录
        function login() {
            // 获取登录时输入的用户名
            let username = $('#inputUsername').val();
            // 获取登录时输入的密码
            let password = $('#inputPassword').val();
            // 登录判断
            if (username === '') {
                alert('用户名不能为空！');
            } else if (password === '') {
                alert('密码不能为空！');
            } else {
                // 获取登录表单信息
                axios({
                    method: 'post',
                    url: '/loginDone',
                    data: $('#loginForm').serialize()
                }).then(function (res) {
                    // 存放返回的数据
                    res = res.data;
                    // 验证成功
                    if (res.code === 200) {
                        // 跳转主页面
                        window.location.href = '/home.html';
                    } else {
                        // 验证失败，弹出提示信息
                        alert(res.msg);
                    }
                }).catch((err) => {
                    // 捕获到异常
                    alert(`ERROR!错误信息如下：${err}`);
                });
            }
        }

        // 注册
        function register() {
            // 获取注册时输入的用户名
            let username = $('#registerUsername').val();
            // 获取注册时输入的密码
            let password = $('#registerPassword').val();
            // 获取注册时再次输入的密码
            let rePassword = $('#registerRePassword').val();
            // 登录判断
            if (username === '') {
                alert('用户名不能为空！');
            } else if (password === '') {
                alert('密码不能为空！');
            } else if (rePassword === '') {
                alert('确认密码不能为空')
            } else if (password !== rePassword) {
                alert('两次密码不一致！');
            } else {
                // 获取注册表单数据
                axios({
                    method: 'post',
                    url: '/registerDone',
                    data: $('#registerForm').serialize()
                }).then(function (res) {
                    // 在axios工具下，服务器返回的数据在返回数据的data中
                    res = res.data;
                    if (res.code === 200) {
                        alert(res.msg);
                        window.location.href = '/';
                    } else {
                        alert(res.msg);
                    }
                }).catch((err) => {
                    alert(`ERROR!错误信息如下：${err}`);
                });
            }
        }
	</script>

	
</body>
</html>